<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" id="file">
  <br><br>

  <!-- 预览的图片 -->
  <img id="img" width="200" src="" alt="">

  <script>
    const file = document.querySelector('#file')
    const img = document.querySelector('#img')

    file.onchange = () => {
      // 浏览器中的 fs，但是只能操作用户选择的文件
      const reader = new FileReader()

      // 当图片读取转换完成，会触发 load 事件
      reader.addEventListener("load", function () {
        console.log(reader.result)

        // 此处得到的是一个 base64 编码之后的内容
        // 你可以认为图片文件文本化了
        img.src = reader.result
      }, false)

      // 开始读文件
      reader.readAsDataURL(file.files[0])
    }
    
    // file.onchange = () => {
    //   // 使用
    //   const data = URL.createObjectURL(file.files[0])
    //   img.src = data

    //   // 最好在使用完毕 data 之后，把它释放掉
    //   // URL.revokeObjectURL(data)
    // }

    
  </script>
</body>
</html>
